<template>
    <div>
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据统计</el-breadcrumb-item>
                <el-breadcrumb-item>数据报表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
  <el-card class="box-card" style="margin-top: 10px">
      <div id="main" ref="main" style="width: 800px; height: 400px"></div>
    </el-card>
</div>
  </template>
  
  <script>
  //引入
  import { report } from "../api/api";
  import * as echarts from "echarts";
  export default {
    data() {
      return {
        //地区
        series: [],
      };
    },
    methods: {},
    created() {
      report().then((res) => {
        console.log(res);
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;
        var option = {
          title: {
            text: "用户来源",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#E9EEF3",
              },
            },
          },
          legend: {
            data: res.data.legend.data,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: res.data.xAxis[0].data,
            },
          ],
          yAxis: [
            {
              type: res.data.yAxis[0].type,
            },
          ],
          series: [
            {
              name: "华东",
              type: "line",
              stack: "Total",
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: [2999, 3111, 4100, 3565, 3528, 6000],
            },
            {
              name: "华南",
              type: "line",
              stack: "Total",
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: [5090, 2500, 3400, 6000, 6400, 7800],
            },
            {
              name: "华北",
              type: "line",
              stack: "Total",
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: [6888, 4000, 8010, 12321, 13928, 12984],
            },
            {
              name: "西部",
              type: "line",
              stack: "Total",
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: [9991, 4130, 7777, 12903, 13098, 14028],
            },
            {
              name: "其他",
              type: "line",
              stack: "Total",
              label: {
                show: true,
                position: "top",
              },
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: [15212, 5800, 10241, 14821, 15982, 14091],
            },
          ],
        };
  
        option && myChart.setOption(option);
      });
    },
    mounted() {},
    components: {},
    computed: {},
    watch: {},
  };
  </script>
  
  <style lang='scss' scoped>
//   #main {
//     margin-top: 100px;
//   }
  </style>